* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

body {
    background-color: #fff;
    transition: 0.25s ease-in-out all;
}

body.active {
    background-color: #18191a;
}

header {
    /*切换背景时过度效果*/
    transition: 0.35s ease-in-out all;
    width: 100vw;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-60px);
    z-index: 100;
    background-color: #fff;
}

header.move {
    transform: translateY(0);
}

header.active {
    background-color: #242526;
}

nav {
    width: 100vw;
    display: flex;
    position: relative;
    /*
    space-between 贴着两边
    space-evenly  紧挨着中间
    */
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.info img {
    height: 32px;
    width: 32px;
    border: transparent solid 1px;
    border-radius: 50%;
}

nav .info a {
    transition: 0.25s ease-in-out all;
    display: flex;
    flex: 1;
    flex-direction: row;
    color: #006dfe;
    font-weight: 600;
    align-items: center;
    margin-left: 15px;
}

.info a img {
    margin-right: 28px;
}

#logo {
    transform-origin: center;
    transition: 0.4s all ease-in-out;
}

#logo:hover {
    transform: rotate(360deg) scale(1.1);

}

nav ul.menu {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    margin-right: 15px;
    max-width: 550px;
    right: 0;
    transition: all 0.3s ease-in-out;
}

nav ul.menu.active {
    color: #ffffff;
}

a {
    text-decoration: none;
}


ul.menu li a {

    text-decoration: none;
    color: #1c1e21;
}

ul.menu li a.active {
    color: #fff;
}

/*设置轮换按钮的样式*/
.menu li:last-child {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: #4d4d4d;
    border-radius: 30px;
    z-index: 5;
    display: flex;
    text-align: center;
    justify-content: center;
    min-width: 50px;
}

.menu li:last-child span.check {
    width: 50%;
    transition: all 0.2s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #fff;
    height: 100%;
    border: #4d4d4d solid 2px;
    border-radius: 50%;
}

.menu li:last-child .black,
.menu li:last-child .white {
    height: 100%;
    width: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    font-size: 13px;
    position: absolute;
    z-index: 7;
    top: 0;

}

.menu li:last-child .black {
    right: 0;
}

.menu li:last-child .white {
    left: 2px;
}

span.check.active {
    right: 0;
    top: 0;
    transform: translateX(100%);
}


/*--------------------文本区域--------------------------*/
.intro-wrapper {
    min-width: 555px;
    min-height: 700px;
    display: grid;
    align-items: center;
    justify-content: space-evenly;
    height: calc(100vh - 60px);
    margin-top: 60px;
}


.intro-wrapper .intro-content {
    display: grid;
    margin-left: 3vw;
}
.intro .bgc-img{
    background: #000;
}

.intro-wrapper .word-img {
    display: grid;
    flex: 2;
}

.intro-content span:first-child {
    color: #444950;
    font-size: 35px;
    font-weight: 600;
}

.intro-content span.active:first-child {
    color: #fff;
}

.intro-content span:first-child span.wrapper {
    color: #006dfe;
}

.intro-wrapper {
    display: grid;
    grid-template-columns: 9fr 10fr;
    background: url(../media/undraw_laravel_and_vue_59tp.svg) 100%/40vw no-repeat;
}

.intro-content p.intro,
.intro-content span.qq {
    color: #8c99ab;
}

.intro-content p.intro.active,
.intro-content span.qq.active {
    color: white;
}

.intro-content p.intro {
    line-height: 32px;
    margin: 26px 0;
    font-size: 1.125rem
}

ul.icon {
    margin-top: 50px;
    display: flex;
    justify-content: start;
    align-items: center;
}

ul.icon li a {
    margin-right: 2vw;
    color: #4093f6;
    font-size: 18px;
}

.intro-content button {
    margin-top: 35px;
    height: 36px;
    width: 150px;
    outline: none;
    border: none;
    background: linear-gradient(
            90deg, #006dfe 11.3%, #20b7d9 161.54%);
    box-shadow: rgba(0 105 165 0.35) 0px 0px 32px;
    border-radius: 7px;
}

.intro-content button a {
    color: white;
}


/*------------------文章区域------------------------*/
.main-wrapper {
    position: relative;
    height: 80%;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
}

.main-wrapper section.posts {
    max-width: 1080px;
    display: flex;
    flex-direction: column;
}

section.posts .post-item {
    /*min-width: 768px;*/
    padding: 24px;
    display: grid;
    grid-template-columns: 2fr 8fr;
    margin-top: 4.25em;
    margin-bottom: 7.25em;
    border-radius: 30px;
    box-shadow: 20px 20px 60px #ced1d6, -20px -20px 60px #fff;
    min-height: 300px;
}

section.posts .post-item.active {
    box-shadow: 20px 20px 60px #253748, -20px -20px 60px #253748;
    background-image: linear-gradient(145deg, #041a31, #000);
}

/*最新博客---标题*/
.main-wrapper > .title span {
    color: #233a57;
    font-size: calc(1.375rem + 1.1vw);
    font-weight: 800;
}

.main-wrapper .title.active {
    color: #dde4ee;
}

.main-wrapper p.active {
    color: #dde4ee;
}

.main-wrapper .title span.active {
    color: #dde4ee;
}

.post p.content.active {
    color: #dde4ee;
}

.post-item .create-date span.active {
    color: #dde4ee;
}

.intro-content ul.icon li a i.active {
    color: white;
}

.post-item .create-date {
    margin-top: 3vh;
    background-image: url(https://zxuqian.cn/icons/circle.svg);
    background-repeat: no-repeat;
    background-size: 100% 130px;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: start;
    align-items: center;
}

.create-date span.day {
    color: #233a57;
    font-size: 4.75em;
    font-weight: 900;
}

.create-date span.month {
    color: #8c8c8c;
}

.post-item .post {
    margin-top: 3vh;
    margin-left: 9vw;
    display: flex;
    flex-direction: column;
    text-align: start;
    justify-content: start;
}

.post .title {
    font-weight: 900;
    font-size: 2em;
    line-height: 1.5em;
    color: #233a57;
}

.post .tags {
    margin-top: 20px;
    margin-bottom: 28px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.tags .tag-item {
    background-color: #4093f6;
    border-radius: 6px;
    margin-right: 10px;
    padding: 6px 10px;
}

.tags .tag-item a {
    font-weight: 500;
    color: #fff;
}

.tags i {
    color: #8c8c8c;
    margin-right: 8px;
}

.post p.content {
    line-height: 1.8em;
    color: #8c8c8c;
}

.post .bottom {
    display: flex;
    justify-content: start;
    margin-top: 40px;
    position: relative;
}

.bottom .visitor i {
    font-size: 24px;
    color: #4093f6;
}

.bottom .visitor span.visitor_num {
    font-size: 29px;
    color: #4093f6;
}

.bottom button {
    position: absolute;
    right: 0;
    height: 36px;
    width: 150px;
    outline: none;
    border: none;
    background: linear-gradient(
            90deg, #006dfe 11.3%, #20b7d9 161.54%);
    box-shadow: rgba(0 105 165 0.35) 0px 0px 32px;
    border-radius: 7px;

}

.bottom button a {
    color: #ffffff;
}


footer{
    margin-top: 20vh;
    padding: 3vh 0 3vh;
    width: 100%;
    height: 30%;
    max-height: 50vh;
    display: flex;
    flex-direction: column;
    background-color: #303846;
    align-items: center;
    justify-content: start;
}
section.footer-menus{
    max-width: 1080px;
    display: grid;
    align-items: start;
    justify-content: start;
    grid-template-columns: 2fr 1fr;

}
section.footer-menus ul li{
    color: #fff;
    margin-top: 2vh;
}

/*     响应式相关设置        */
.burger {
    display: none;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 15px;
}
.burger span{
    margin-top: 3px;
    background-color: #233a57;
    height: 4px;
    width: 20px;
}
